//文章管理=>发表文章
// const BASE_URL='http://api-breakingnews-web.itheima.net'
// 获取类别
myGetCates(res=>{
  // 遍历数组
  res.data.data.forEach(v => {
    let theOption=`<option value="${v.Id}" lay-verify="cate">${v.name}</option>`
    $('select').append(theOption)
    
  });
  //双向绑定机制（veu里的内容，这里没有这个功能）
  //刷新表单里的某个元素
  //重新刷新edit 容器里的 select元素
  let form = window.layui.form
  form.render('select','edit')
})

// 初始化富文本
// // 二. 集成富文本编辑器
// function initTinyMce() {
//   tinymce.init({
//       selector: 'textarea[name=content]', //容器，可使用css选择器
//       language: 'zh_CN', //调用放在langs文件夹内的语言包
//       plugins: ['link', 'table', 'image'], //选择需加载的插件
//       // //选中时出现的快捷工具，与插件有依赖关系
//       // quickbars_selection_toolbar: 'bold italic forecolor | link blockquote quickimage',
//   });
// }
// initTinyMce();

// 官网自带
initEditor()

// 封面图片
// 初始化裁剪工具
// 三. 集成图片裁剪的插件
let cropper;
function initCropper() {
    // 1. 集成裁剪插件
    const image = document.getElementById('image'); // 获取到要被添加裁剪插件的图片
    cropper = new Cropper(image, {
        aspectRatio: 1, // 横纵比例
        preview: $(".img-preview")
    });
}
initCropper();

// 点击更换封面
$('.select').on('click',function(){
  $('#file').click()
})

$('#file').on('change',function(){
  let url =URL.createObjectURL(this.files[0])
  cropper.replace(url)
}) 
// 不要使用 append 已经 fd 初始化的时候,已经有了 1=>1
// 点击确认添加内容
// 五. 发布文章
$('.layui-form').on('submit', e => {
  e.preventDefault()

  //1. 标题   2. 分类
  let fd = new FormData($('.layui-form')[0])

  //3. 内容
  let htmlStr = tinyMCE.activeEditor.getContent()
  // 不要使用 append 已经 fd 初始化的时候,已经有了 1=>1
  fd.set('content', htmlStr)

  //4. 图片 blob
  let canvas = cropper.getCroppedCanvas({
    width: 100,
    height: 100,
  })

  canvas.toBlob(function (blobObj) {
    // append 添加                     0 => 1
    fd.append('cover_img', blobObj)

    // fd.forEach((value, key) => {
    //  console.log(key, value)
    // })
    // 发送请求
    axios
      .post(`/my/article/add`, fd, {
        headers: {
          Authorization: localStorage.getItem('token'),
        },
      })
      .then(res => {
        // console.log('发布文章', res.data)
		 // 发表成功	
         if(res.data.status===0){
          layer.msg('发表成功', { icon: 1 },function(){

            location.href='../list/list.html'
          })
         }
      })

  })
})